import React, { useEffect, useState } from 'react'
import { View,Image, Text } from '@tarojs/components'
import Taro, { useShareAppMessage } from '@tarojs/taro'

import './index.scss'

export default function Reservation() {
  const [info,setInfo] = useState({})
  useEffect(()=>{
    _initData()
  })
  function handleReservation(){  ///  点击预约购票
    if(!info.isSub){
      const temp = info.templateIds
      Taro.requestSubscribeMessage({
        tmplIds: temp,
        success: async (res) => {
          if(res[temp[0]] == 'accept'){
            const data = {
              "openId": await Taro.getOpenId(),
              "templateIds": info.templateIds
            }
            await Taro.$post('/act/home/commit',data)
            _initData()
          }
        }
      })
    }
  }
  ///     network
  async function _initData(){
    Taro.$get(`/act/home/data?openId=${await Taro.getOpenId()}`).then(res=>{
      if(!res.content.isShow){
        Taro.reLaunch({
          url:'/pages/index/index'
        });
      }
      setInfo(res.content)
    })
  }
  useShareAppMessage(()=>{
    return {
      title: '小聚团 · 一起玩',
      path: '/mainPages/reservation/index'
    }
  })
  return (
    info?.title?
    <View className="index-reservation">
      <View className="reservation-banner">
        <Image src="info.bannerUrl" className="image" mode="widthFix"></Image>
      </View>
      <View className="reservation-header">
        <View className='h1'>{info.title}</View>
        <View className="p">{info.content}</View>
      </View>
      <View className="reservation-main">
        <View className='h2'><Text>本次合作院线</Text></View>
        <View className="main-list">
          {info.cinemas?.map(res=>{
            return <View className="list-item" style="width: 33%;" key={item}>· {item}</View>
          })}
        </View>
        <View className='h2'><Text>计划观赛城市</Text></View>
        <View className="main-list">
          {info.cities?.map(res=>{
            return <View className="list-item" style="width: 20%;" key={item}>· {item}</View>
          })}
        </View>
        <View className="main-info"><Text>注意*</Text> 观赛城市以最终开票为准。</View>
        <View className='h2'><Text>计划观赛场次</Text></View>
        <View className="main-list">{info.schedule && info.schedule.join('、')}</View>
      </View>
      <View className="reservation-code">
        {info.qrcodes?.map(res=>{
          return <Image src={item} className="code-img" show-menu-by-longpress key={item} mode="widthFix"></Image>
        })}
      </View>
      <View className="reservation-button">
        <View className={`button-item ${info.isSub?'disabled':''}`} onClick={()=>{handleReservation()}}>{info.isSub?'您已预约':'预约购票'}</View>
      </View>
    </View>:null
  )
}
